<template>
	<div>

		<div class="app-container">

			<TopInfo />

			<Search :lookup="data.lookup" @investigate="inves" />



			<el-button v-prmis="'machine_group_add'" type="primary" size="small" @click="modify('')">
				<template #default>
					<span class="text-sm">{{$t('machine.types.add')}}</span>
				</template>
			</el-button>

			<el-button v-prmis="'machine_group_mg_exportM'" type="warning" size="small"
				@click="getspread">{{$t('machine.types.export')}}</el-button>

		</div>

		<div class="app-container" v-loading="data.mtloading">
			<el-table  ref="cTable" :data="data.list" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full" @selection-change="handleSelectionChange" lazy :load="load"
				:tree-props="{ hasChildren: 'hasChildren' }" row-key="mg_id">

				<el-table-column type="selection" width="55" />
				<el-table-column prop="mg_id" label="ID" />
				<el-table-column prop="mg_name" :label="$t('machine.types.name')">
					<template #default="scope">
						{{ scope.row.mg_name || $t('machine.types.undefined') }}
					</template>
				</el-table-column>
				<el-table-column prop="desc" :label="$t('machine.types.num')">
					<template #default="scope">
						<el-link :type="scope.row.machineNum == 0 ? 'info' : 'primary'" :underline="false"
							@click="scope.row.machineNum == 0 ? '' : getmacnum(scope.row.mg_id)">
							{{ scope.row.machineNum }}
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="desc" :label="$t('machine.types.desc')">
					<template #default="scope">
						{{ scope.row.desc || '--' }}
					</template>
				</el-table-column>
				<el-table-column prop="sort" :label="$t('machine.types.sort')">
					<template #default="scope">
						{{ scope.row.sort || '0' }}
					</template>
				</el-table-column>
				<el-table-column prop="status" :label="$t('machine.types.packetStates')">
					<template #default="scope">
						<el-tag v-if="scope.row.status == 1" type="success">{{ $t('public.enable') }}</el-tag>
						<el-tag v-else type="danger">{{ $t('public.disable') }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="create_time" :label="$t('date.createTime')">
					<template #default="scope">
						{{ getPlevel.gettime(scope.row.create_time, 3) }}
					</template>
				</el-table-column>
				<el-table-column :label="$t('public.operate')" width="255">
					<template #default="scope">
						<el-button v-prmis="'machine_group_add'" type="success" size="small" @click="add(scope.row)">
							{{ $t('public.add') }}
						</el-button>
						<el-button v-prmis="'machine_group_lang'" type="warning" size="small"
							@click="language(scope.row)">{{ $t('public.lang') }}</el-button>
						<el-button v-prmis="'machine_group_update'" type="primary" size="small"
							@click="modify(scope.row)">{{$t('public.edit')}}</el-button>
						<el-button v-prmis="'machine_group_del'" type="danger" size="small"
							@click="del(scope.row.mg_id)">{{ $t('public.del')}}</el-button>
					</template>
				</el-table-column>
			</el-table>
			<PageNum :total="data.total" :page="data.group" @exposeData="current" @fraction="fraction" />
		</div>

		<el-dialog v-if="data.dialogVisible" v-model="data.dialogVisible" :title="data.title" center width="60%"
			class="h-3/4 overflow-auto">
			<typelang :info="data.obj" :lang="data.languagelist" />
		</el-dialog>

		<el-dialog v-model="data.macdialog" :title="$t('machine.marketing.Applicable')" width="40%" center class="h-3/4 overflow-auto">
			<el-table v-loading="data.macloading" :data="data.maclist" :header-cell-style="{ 'text-align': 'center' }"
				:cell-style="{ 'text-align': 'center' }" class="w-full">
				<el-table-column prop="machine_id" :label="$t('machine.code')" show-overflow-tooltip />
				<el-table-column prop="machine_name" :label="$t('machine.name')" show-overflow-tooltip />
			</el-table>
		</el-dialog>
		<exports :dialogVisible="dialogExport" @close="dialogExport = false" />
	</div>

</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t } = useI18n()
import TopInfo from '@/components/TopInfo/index.vue';
import Search from '@/components/Search/index.vue';
import PageNum from '@/components/PageNum/index.vue';
import typelang from '../common/type_lang.vue';
import getPlevel from '@/utils/level'
import { getgroupList, delgroup, exporgrouptM, getListgroupmg } from '@/api/machine_type';
import { getlang } from '@/api/manage';
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import exports from '@/components/export.vue';
const router = useRouter()
const dialogExport = ref(false)
const cTable = ref(null)
let data = reactive({
	Loadnum: 0, // 加载数量
	treeLoad: [], // 懒加载子级菜单
	Loadstatus: false, // 懒加载状态
	mtloading: false, // 加载
	macloading: false, // 查看设备加载
	dialogVisible: false, // 弹窗
	macdialog: false, // 查看设备数量弹窗
	lookup: [ // 筛选栏
		{ title: $t('machine.types.name'), type: 'input', value: '', key: 'mg_name' },
	],
	title: '', // 弹窗标题
	list: [], // 列表信息
	typeID: [], // 选中分组ID
	maclist: [], // 设备列表
	languagelist: [], // 语言列表
	obj: { // 添加/修改数据
		mg_name: '',
		desc: '',
		sort: '',
		status: 1
	},
	group: { // 筛选数据
		mg_name: '',
		page: 1,
		pageNum: 15
	},
	total: 0, // 总条数
})
// 添加分类
let add = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e,
			type:'addSub'
		}))
	}
	router.push({ path: '/machine/type/type_info', query: query })
}
// 树状懒加载
let load = (row, treeNode, resolve) => {
	let arr = []
	if (data.Loadstatus == false) {
		data.treeLoad.push({ row, treeNode, resolve })
	}
	getgroupList({ pid: row.mg_id }).then(res => {
		if (res.state == 200) {
			for (let item of res.data) {
				item.hasChildren = true
				arr.push(item)
			}
		}
		if (arr.length == 0) {
			row.hasChildren = false
		}

		if (data.Loadstatus) {
			data.Loadnum = 0
			data.Loadstatus = false
		}
		resolve(arr)
	}).catch(err => {
		resolve([])
		row.hasChildren = false
		cTable.value.store.states.lazyTreeNodeMap.value[row.gc_id] = [];
	})
}
// 获取列表信息
let getlist = () => {
	data.mtloading = true
	getgroupList(data.group).then(res => {
		data.typeID = []
		data.mtloading = false
		if (res.state == 200) {
			for (let item of res.data.data) {
				item.hasChildren = true
			}
			data.list = res.data.data
			data.total = res.data.total
		}
	}).catch(err => {
		data.mtloading = false
	})
}

// 选中的分组
let handleSelectionChange = (e) => {
	data.typeID = []
	for (let item of e) {
		data.typeID.push(item.mg_id)
	}
}

// 导出
let getspread = () => {
	if (data.typeID.length == 0) {
		ElMessage({
			message: $t('message.pleaseSelectGroup'),
			type: 'success'
		})
		return
	}
	let obj = {
		mg_id: data.typeID.join(',')
	}
	ElMessageBox.confirm($t('message.isExport')).then(res => {
		exporgrouptM(obj).then(res => {
			if (res.state == 200) {
				dialogExport.value = true
				getlist()
				return
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			})
		}).catch(err => {
			console.log(err)
		})
	})
}

// 查询回调
let inves = (e) => {
	for (let key in e) {
		data.group[key] = e[key]
	}
	data.group.page = 1
	data.group.pageNum = 15
	getlist()
}

// 页数回调
let current = (e) => {
	data.group.page = e
	getlist()
}

// 条数回调
let fraction = (e) => {
	data.group.pageNum = e
	getlist()
}

// 添加/修改按钮
let modify = (e) => {
	let query = {
		l: encodeURI(JSON.stringify({
			info: e
		}))
	}
	router.push({ path: '/machine/type/type_info', query: query })
}

// 删除分组信息
let del = (e) => {
	ElMessageBox.confirm($t('message.isTip'))
		.then(res => {
			delgroup({ mg_id: e }).then(res => {
				if (res.state == 200) {
					ElMessage({
						message: $t('message.delSuccess'),
						type: 'success'
					})
					getlist()
					return
				}
				ElMessage({
					message: $t('message.networkFailed'),
					type: 'error'
				})
			})
		}).catch(err => {
			console.log('取消')
		})
}

// 多语言
let language = (e) => {
	data.title = $t('machine.goods.setLang')
	data.dialogVisible = true
	data.obj = e
}

// 获取多语言列表
let getlanglist = () => {
	getlang().then(res => {
		if (res.state == 200) {
			data.languagelist = res.data
		}
	})
}

// 查询设备数量
let getmacnum = (e) => {
	data.macdialog = true
	data.macloading = true
	data.maclist = []
	getListgroupmg({ mg_id: e }).then(res => {
		data.macloading = false
		if (res.state == 200) {
			data.maclist = res.data
		}
	})
}

getlist()
getlanglist()

</script>
